<template>
  <div class="title">
    <!-- 搜索 -->
    <van-nav-bar class="textc" title="商品订单" left-arrow />
    <van-search
      shape="round"
      v-model="value"
      show-action
      placeholder="关键字查询"
    >
      <template #action>
        <div class="search">搜索</div>
      </template>
    </van-search>

    <!-- 标签页 -->
    <!-- 全部 -->
    <van-tabs>
      <!--  v-for="(item,index)in records" :key="index" -->
      <van-tab title="全部">
        <div v-for="item in records" :key="item.index" class="dabox">
          <div class="shop">
            <div class="shop-l">商品描述描述商品</div>
            <div class="shop-r">
              <img src="../assets/img/xiangyou.png" alt="" />
            </div>
          </div>
          <!-- 信息 -->
          <div>
            <div class="xinxibox">
              <div class="tul"><img src="../assets/logo.png" alt="" /></div>
              <div class="wenzi">
                <h3>{{ item.title }}</h3>
                <!-- -->
                <div>{{ item.orderTime }}</div>
                <!-- -->
                <div>{{ item.orderUserName }}</div>
              </div>
            </div>
            <div class="btn" @click="btnpj">评论</div>
            <!-- 按钮 -->
          </div>
        </div>
      </van-tab>

      <!-- 代发货 -->
      <van-tab title="待发货">
        <div v-for="item in records1" :key="item.index" class="dabox">
          <div class="shop">
            <div class="shop-l">商品描述描述商品</div>
            <div class="shop-r">
              <img src="../assets/img/xiangyou.png" alt="" />
            </div>
          </div>
          <!-- 信息 -->
          <div>
            <div class="xinxibox">
              <div class="tul"><img src="../assets/logo.png" alt="" /></div>
              <div class="wenzi">
                <h3>{{ item.title }}</h3>
                <!-- -->
                <div>{{ item.orderTime }}</div>
                <!-- -->
                <div>{{ item.orderUserName }}</div>
              </div>
            </div>
            <div class="btn" @click="btnfn">发货</div>
            <!-- 按钮 -->
          </div>
        </div>
      </van-tab>

      <!--  -->
      <van-tab title="待收货">
        <div v-for="item in records2" :key="item.index" class="dabox">
          <div class="shop">
            <div class="shop-l">商品描述描述商品</div>
            <div class="shop-r">
              <img src="../assets/img/xiangyou.png" alt="" />
            </div>
          </div>
          <!-- 信息 -->
          <div>
            <div class="xinxibox">
              <div class="tul"><img src="../assets/logo.png" alt="" /></div>
              <div class="wenzi">
                <h3>{{ item.title }}</h3>
                <!-- -->
                <div>{{ item.orderTime }}</div>
                <!-- -->
                <div>{{ item.orderUserName }}</div>
              </div>
            </div>
            <div class="btn" @click="btnsh">收货</div>
            <!-- 按钮  @click="btnsh"-->
          </div>
        </div>
      </van-tab>
      <van-tab title="待评价">
        <div v-for="item in records3" :key="item.index" class="dabox">
          <div class="shop">
            <div class="shop-l">商品描述描述商品</div>
            <div class="shop-r">
              <img src="../assets/img/xiangyou.png" alt="" />
            </div>
          </div>
          <!-- 信息 -->
          <div>
            <div class="xinxibox">
              <div class="tul"><img src="../assets/logo.png" alt="" /></div>
              <div class="wenzi">
                <h3>{{ item.title }}</h3>
                <!-- -->
                <div>{{ item.orderTime }}</div>
                <!-- -->
                <div>{{ item.orderUserName }}</div>
              </div>
            </div>
            <div class="btn" @click="btnpj">评价</div>
            <!-- 按钮 -->
          </div>
        </div></van-tab
      >
    </van-tabs>
    <!-- 商品描述 -->
  </div>
</template>
 
<script>
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
import {
  allordersApi, 
  allorders1Api,
  allorders2Api,
  allorders3Api,
} from "./../request/api";
export default {
  data() {
    return {
      //avtive: 1,
      current: 1,
      size: 10,
      value: "",
      records: {},
      records1: {},
      records2: {},
      records3: {},
    };
  },
  created() {
    allordersApi({
      current: this.current,
      size: this.size,
      // records: this.records
    }).then((res) => {
      // console.log("11", res.data.records);
      // 全部
      this.records = res.data.records;
      // 待收货allorders1Api
      //console.log(records);
    });

    allorders1Api().then((res) => {
      // console.log(res.data.records);
      this.records1 = res.data.records;
    });
    allorders2Api({
      current: this.current,
      size: this.size,
    }).then((res) => {
      // console.log(res.data.records);
      this.records2 = res.data.records;
      console.log(this.records2);
    });
    allorders3Api({
      current: this.current,
      size: this.size,
    }).then((res) => {
      // console.log(res.data.records);
      this.records3 = res.data.records;
    });
  },
  methods: {
    btnfn() {
      this.$router.push("/receipt");
    },
    btnpj() {
      this.$router.push("/evaluate");
    },
    btnht() {
      this.$router.push("/evaluate");
    },
    btnsh() {
      Dialog.confirm({
        title: "是否确认收货",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    // btnsh() {
    //   this.$router.push("/shipments");
    // },
  },
};
// allorders2Api;
</script>
 
<style lang = "less" scoped>
.title {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 40px;

  .van-nav-bar {
    color: #fff;
  }
  .textc {
    font-size: 20px;
    background-color: #003399;
  }
  .van-search {
    font-size: 30px;
  }
  .search {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 18px;
    color: #003399;
    font-weight: 200px;
  }
  .van-tabs {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #ccc;
    border-bottom: 10px solid #f5f5f5;
  }
  /* 购物 */
  .shop {
    width: 100%;
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f5f5f5;
    overflow: hidden;
    .shop-l {
      float: left;
      margin-left: 20px;
    }
    .shop-r {
      float: right;
      margin-top: 5px;
      margin-right: 20px;
    }
  }
  /* 信息 */
  .xinxibox {
    height: 100px;
    margin-top: 20px;
    margin-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    overflow: hidden;
    border-bottom: 1px solid #f5f5f5;

    .tul {
      width: 100px;
      height: 80x;
      float: left;
      line-height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .wenzi {
      width: 200px;
      height: 60px;
      line-height: 30px;
      float: right;
      text-align: left;
    }
  }
  .btn {
    width: 80px;
    height: 30;
    border-radius: 20px;
    background-color: #cfc;
    float: right;
    margin-right: 20px;
    line-height: 30px;
  }
  .dabox {
    border-bottom: 10px solid #f5f5f5;
    height: 240px;
  }
}
</style>